import React, { useEffect, useState } from 'react';
import { Button, Select, Form, Input, DatePicker, Card, Table, message, Tag, Drawer } from 'antd';
import dayjs from 'dayjs';
import type { Dayjs } from 'dayjs';
import type { ColumnsType } from 'antd/es/table';
import * as service from '../../../api/cyyindex'
import { useNavigate } from 'react-router-dom';
import './staffEntry.scss'

const { Search } = Input;
const { RangePicker } = DatePicker;
interface Props {

}
interface DataType {
  enid: number;
  name: string;
  age: number;
  address: string;
  tags: string[];
  status:number
 entry:number
}
function Entry(props: Props) {
  const navigate = useNavigate()
  const [messageApi, contextHolder] = message.useMessage();
  const [entrylist, setEntrylist] = useState<any>([])
  useEffect(() => {
    service.entry_list1().then((res: any) => {
      console.log(res)
      setEntrylist(res.data.data)
    })

  }, [])

  const onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {
    if (dates) {
      console.log('From: ', dates[0], ', to: ', dates[1]);
      console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);
    } else {
      console.log('Clear');
    }
  };
  const rangePresets: {
    label: string;
    value: [Dayjs, Dayjs];
  }[] = [
      { label: '今天', value: [dayjs().add(0, 'd'), dayjs()] },
      { label: '昨天', value: [dayjs().add(-1, 'd'), dayjs()] },
      { label: '近3天', value: [dayjs().add(-3, 'd'), dayjs()] },
      { label: '最近一周', value: [dayjs().add(-7, 'd'), dayjs()] },
      { label: '最近一个月', value: [dayjs().add(-30, 'd'), dayjs()] },
      { label: '最近三个月', value: [dayjs().add(-90, 'd'), dayjs()] },
    ];
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onSearch = (value: string) => console.log(value);

  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
  const handleChange = (value: string) => {
    console.log(`selected ${value}`);
  };
  const mySea = async (id: any) => {
    var res = await service.entry_delete1({ enid: id })
    console.log(res)
    if (res.data.code == 200) {
      messageApi.open({
        type: 'success',
        content: '已删除',
      });
    }
    service.entry_list1().then((res: any) => {
      console.log(res)
      setEntrylist(res.data.data)
    })
  }
  const myClick = (id:any,val:any) => {
    service.entry_edit1({ enid: id, entry: val - 1, status: 1 }).then(res => {
      console.log(res)
      if (res.data.code == 200) {
        messageApi.open({
          type: 'success',
          content: '修改成功',
        });

      }
      
    })
    service.entry_list1().then((res: any) => {
      console.log(res)
      setEntrylist(res.data.data)
    })
  }
  const columns: ColumnsType<DataType> = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',

    },
    {
      title: '入职部门',
      dataIndex: 'station',
      key: 'station',
    },
    {
      title: '入职职位',
      dataIndex: 'job',
      key: 'job',
    },
    {
      title: '手机号码',
      key: 'tel',
      dataIndex: 'tel',
    },
    {
      title: '入职登记状态',
      key: 'entry',
      dataIndex: 'entry',
      render: (_:any,record:any) => {
        return (
          <>
           {
           record.entry==1? <Tag>已入职</Tag>:record.entry==2?<Tag>未入职</Tag>:<Tag>已放弃</Tag>
         }
          </>
         
        )
      }
    },
    {
      title: '预计入职日期',
      key: 'date',
      dataIndex: 'date',
    },
    {
      title: '入职审批',
      key: 'entry',
      dataIndex: 'entry',
      render: (_:any,record:any) => {
        return (
          <>
           {
           record.entry==1? <Tag>已审批</Tag>:<Tag>未审批</Tag>
         }
          </>
         
        )
      }
    },
    {
      title: '来源',
      key: 'origin',
      dataIndex: 'origin',
    },
    {
      title: '添加人',
      key: 'person',
      dataIndex: 'person',
    },

    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <>
          {
          record.entry!=2?'': <Tag  onClick={()=>{myClick(record.enid,record.status)}} style={{cursor:'pointer'}}>状态修改</Tag>
          }
          <Tag onClick={() => { mySea(record.enid) }} style={{cursor:'pointer'}}>删除</Tag>
        </>
      ),
    },
  ];
  const myClick1 = () => {

    navigate("/index/staff/entryadd") 
}

  return (
    <div className='entry-box'>
     <p className='title'>入职管理</p>
      {/* 顶部搜索 */}
      <div className='box'>
      <Form
        name="basic"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        autoComplete="off"
        layout='inline'
       
      >
        <Form.Item
          label="入职部门"
          name="station"

        >
          <Select
            defaultValue="请选择"

            onChange={handleChange}
            options={[
              { value: '研发部', label: '研发部' },
              { value: '设计部', label: '设计部' },
              { value: '人事部', label: '人事部' },
              { value: '行政部', label: '行政部', },
            ]}
          />
        </Form.Item>

        <Form.Item
          label="入职职位"
          name="job"

        >
          <Select
            defaultValue="请选择"

            onChange={handleChange}
            options={[
              { value: '产品经理', label: '产品经理' },
              { value: '设计主管', label: '设计主管' },
              { value: '设计师', label: '设计师' },
              { value: '前台', label: '前台', },
            ]}
          />
          </Form.Item>
          <Form.Item >
          
            <Button type="primary" htmlType="submit" onClick={() => {myClick1()}}>
              新增员工
            </Button>
        

          </Form.Item>
          <Form.Item

            label="入职日期"
            name="date"
        >
                    <RangePicker presets={rangePresets} onChange={onRangeChange} />

          </Form.Item>

      
        <Form.Item
          label="员工类型"
          name="type"

        >
          <Select
            defaultValue="请选择"

            onChange={handleChange}
            options={[
              { value: '全职', label: '全职' },
              { value: '兼职', label: '兼职' },
              { value: '实习', label: '实习' },
              { value: '临时工', label: '临时工', },
            ]}
          />
        </Form.Item>

        <Form.Item
          label="入职登记状态"
          name="status"

        >
          <Select
            defaultValue="请选择"

            onChange={handleChange}
            options={[
              { value: '未发送', label: '未发送' },
              { value: '已发送', label: '已发送' },
              { value: '已确认', label: '已确认' },

            ]}
          />
        </Form.Item>
        <Form.Item

          label="员工来源"
          name="origin"
        >
          <Select
            defaultValue="请选择"

            onChange={handleChange}
            options={[
              { value: '手动添加', label: '手动添加' },
              { value: '审批入职', label: '审批入职' },
              { value: '扫描入职', label: '扫描入职' },

            ]}
          />
        </Form.Item>

        <Form.Item

          name="password"
        >
          <Search placeholder="请输入关键字" onSearch={onSearch} />

        </Form.Item>
      </Form>

      {/* 表格 */}
      <div style={{ marginTop: 20 }}>
        <Table columns={columns} dataSource={entrylist} />
      </div>
{contextHolder}
      </div>
      </div>
  );
}

export default Entry;